<template>
  <div id="body" class="charts" @click="init">
    <div :id="id" class="item" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'BodyCharts',
  props: {
    data: {
      type: Object,
      default: () => []
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chartData: [],
      colorList: []
    }
  },
  watch: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 在指定容器中初始化echarts实例
      const myCharts = echarts.init(document.getElementById(this.id))
      // 指定图标配置项和数据
      const options = {
        grid: {
          top: 20,
          left: '4%',
          right: '1%',
          bottom: 10,
          containLabel: true // 是否显示刻度标签
        },
        xAxis: [
          {
            axisLine: {
              onZero: false
            },
            type: 'category',
            data: ['']
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            axisLine: {
              show: true
            },
            axisTick: {
              show: true
            },
            max: this.data.topFloor,
            min: this.data.bottomFloor > 0 ? 0 : this.data.bottomFloor,
            splitNumber: this.data.topFloor < 10 ? this.data.topFloor : '',
            minInterval: 1,
            boundaryGap: [2, 2],
            splitLine: {
              // gird 区域中的分割线
              show: false, // 是否显示
              lineStyle: {
                color: '#666',
                width: 1
              }
            }
          }
        ],
        series: this.createSeries(this.data.inspectFloors, this.data.saleFloor)
      }
      // 开始渲染图表
      myCharts.setOption(options)
    },
    createSeries(data = [], line = 0) {
      const series = []
      if (data.length > 0) {
        data.forEach((item, index) => {
          series.push({
            name: index,
            type: 'bar',
            barWidth: '20',
            stack: 'stack',
            data: [item.floor],
            markLine: {
              // 标记线
              symbol: 'none',
              data: [
                {
                  silent: false,
                  lineStyle: {
                    type: 'solid',
                    color: 'red'
                  },
                  label: {
                    show: false
                  },
                  yAxis: line
                }
              ]
            },
            itemStyle: {
              normal: {
                borderColor: item.inspectStatus ? '#1826b1' : '#fff',
                color: item.inspectStatus ? '#1826b1' : '#fff'
              }
            }
          })
        })
      } else {
        series.push({
          type: 'bar',
          data: [],
          markLine: {
            // 标记线
            symbol: 'none',
            data: [
              {
                silent: false,
                lineStyle: {
                  type: 'solid',
                  color: 'red'
                },
                label: {
                  show: false
                },
                yAxis: line
              }
            ]
          }
        })
      }
      return series
    }
  }
}
</script>

<style lang="scss" scoped>

.charts {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  .item {
    width: 80px;
    height: 100%;
  }
}
</style>
